<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- SpringBoot 默认目录为 static  推荐使用 绝对路径 -->
    <!-- Thymeleaf 前后端 都可以使用的模板引擎  -->
    <script src="/js/jquery-1.12.4.js" th:src="@{/js/jquery-1.12.4.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <script  th:src="@{/js/invitation2.js}"></script>
    <link rel="stylesheet" th:href="@{/css/invitation.css}"/>


</head>
<body>
    <center><h1>帖子列表</h1></center>
    <hr>
    <!--
    // 使用请求域 封装数据 (使用 Thymeleaf 遍历语法 获取数据)
    // 通过 Ajax 技术 获取后台数据
    -->
   <div id="app">
       <table id="mytable">
           <thead>
           <tr align="center">
               <th colspan="5">
                   帖子标题: <input type="text" v-model="title">
                   <button @click="fnsearch">搜索</button>
               </th>
           </tr>
           <tr  style="background-color:#8BBDFF;">
               <th>标题</th>
               <th>内容摘要</th>
               <th>作者</th>
               <th>发布时间</th>
               <th>操作</th>
           </tr>
           </thead>
           <tbody >
           <!-- 判断 是否为奇数行
           v-for 会遍历所在标签本身 -->
           <tr align="center" v-for="(invitation,index) in list"  :class="{bgc:index%2==0}">
               <td>{{invitation.title}}</td>
               <td>{{invitation.summary}}</td>
               <td>{{invitation.author}}</td>
               <td>{{invitation.createdate}}</td>
               <!-- 查看当前 帖子的回复信息 -->
               <!-- href="${page}"  Thymeleaf @{/} -->
               <!--<td><a th:href="@{/replydetail/selectByInvid(invid=1)}">查看回复</a></td>-->
               <td><a :href="'/replydetail/selectByInvid?invid='+invitation.id">查看回复</a></td>
           </tr>
           </tbody>
       </table>
       <!-- 分页工具栏 -->
       <div id="page">
           <div class="left">
               第 {{pageNum}}/ {{pages}}页
           </div>
           <div class="right">
               <a href="http://www.baidu.com" @click.prevent @click="changePage(1,title)">首页 </a> &nbsp;
               <a href="javascript:;" @click="fnprePage">上一页 </a> &nbsp;
               <!-- href="javascript:;" 取消href 的页面跳转功能  -->
               <a href="javascript:;" @click.prevent @click="fnnextPage">下一页</a> &nbsp;
               <a href="javascript:;" @click="changePage(pages,title)">末页 {{pages}}</a>
           </div>
       </div>
   </div>
</body>
</html>